<div class='card-container'>
  <div class='flippable-card' [ngClass]="{'flipped': flipped}">
    <mat-card class="custom-card front" *ngIf="!flipped">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{ project.title }}</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image [src]="project.thumbnail" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button class="active" mat-button (click)='flipped = !flipped'>READ MORE</button>
        <button class="active" mat-button [routerLink]="['/dashboard/projects/', project.id]">{{ project.id }}</button>
      </mat-card-actions>
    </mat-card>
    <mat-card class="custom-card back" *ngIf="flipped">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{ project.title }}</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button class="active" mat-button (click)='flipped = !flipped'>READ MORE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>
